<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
    <title>登录</title>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/phone.js" type="text/javascript" charset="utf-8"></script>
</head>
<body background="img/loginBack.png">
<div class="logo">
    <img src="img/logo.png"/>
</div>
<div class="inputBox">
    <div class="phoneNumber input">
        <img src="img/phoneIcon.png"/>
        <div class="">
            <input type="number" name="number" id="telephone" value="" placeholder="请输入手机号"/>
        </div>
    </div>
    <div class="verifyCode input">
        <img src="img/loginCode.png"/>
        <div class="">
            <input type="number" id="input_code" value="" placeholder="请输入验证码"/>
            <button id="code" class="">获取验证码</button>
        </div>

    </div>
</div>
<div class="buttonBox">
    <button class="login">登录</button>
    <button class="register">注册</button>
</div>
</body>
<script type="text/javascript">
	
	// 1.为 获取验证码按钮添加点击事件
	
	var buttonCode = document.getElementById("code");
	var timer  = null;
	var count = null;
	
	var buttonEnable = true;
	
	buttonCode.onclick = function(){
			// 5. 另外还要注意显示倒计时期间，按钮不可点击
		if(!buttonEnable){
			
			return false;
		}
	
		count = 30;
			// 2.触发每秒一次的间隔定时器 ，
		timer = setInterval(function(){
			
			if(count<=0){
					// 4.当30次结束时 清楚定时器，button的 文本重新显示为 获取验证码
				buttonEnable = true;
				buttonCode.innerText = "获取验证码";
				clearInterval(timer);
			}else{
				// 3.修改 button 的innerText 每秒展示一下 倒计时时间 ，共计30 次
				buttonEnable = false;
				buttonCode.innerText = count+"s"
				count--;
			}
			
			
		},1000);
		
	}
	

	
	
	

	


   
   
</script>
</html>